<!--
 * @Author: MarsLay
 * @Date: 2021-12-27 10:54:10
 * @LastEditTime: 2024-02-04 09:38:28
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 自定义头像组件，动态传值显示头像，可通过slot动态插入样式
 * @FilePath: components\avatar\avatar.vue
-->
<template>
  <uni-popup @change="change" ref="timePicker" mask-background-color="rgba(0,0,0,0.6)">
    <view class="area">
      <view class="inner">
        <view @click="select(i)" class="single" :class="{ 'selected': i == currentIdx }" v-for="(v, i) in option"
          :key="i">{{
            v.title }}</view>
      </view>
      <view class="handler">
        <view @click="todo(v.key)" class="single"
          :style="{ background: v.bgcolor, color: v.color, borderColor: v.bdcolor }" v-for="(v, i) in button" :key="i">{{
            v.title }}</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: "popup-select",
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    option: {
      type: Array,
      default: []
    },
    button: {
      type: Array,
      default: [{ title: '取消', bgcolor: '#E8FFEF', color: '#6ABE83', bdcolor: '#6ABE83', key: 'cancel' },
      { title: '确定', bgcolor: '#6ABE83', color: '#ffffff', key: 'confirm' }],
    }
  },
  data() {
    return {
      currentIdx: -1,
    };
  },
  computed: {},
  watch: {
    show(v) {
      v == true ? this.$refs.timePicker.open("bottom") : this.$refs.timePicker.close();
    }
  },
  onLoad(d) { },
  onShow() { },
  methods: {
    select(i) {
      if (this.currentIdx == i) return;
      this.currentIdx = i;
    },
    change(v) {
      this.$emit("update:show", v.show);
    },
    todo(key) {
      this.$refs.timePicker.close();
      key == "confirm" && this.option[this.currentIdx] && this.$emit("confirm", { value: this.option[this.currentIdx].id, txt: this.option[this.currentIdx].title });
    }
  },
};
</script>
<style lang='less' scoped>
.area {
  position: fixed;
  top: 60%;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
  border-radius: 40upx;

  .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    overflow-y: scroll;
    padding: 52upx 36upx;
    width: 100%;
    height: calc(100% - 100upx);

    .single {
      .flex(row, center);
      margin: 0 24upx 24upx 0;
      width: calc((100% - 48upx)/3);
      height: 70upx;
      background: #F5F5F5;
      border-radius: 8upx;
      font-size: 28upx;
      color: #333333;

      &:nth-child(3n) {
        margin: 0 0 24upx 0;
      }

      &.selected {
        color: #6ABE83;
        background: #E8FFEF;
        border: 2upx solid #6ABE83;
      }
    }
  }

  .handler {
    .flex();
    padding: 0 36upx;

    .single {
      .flex(row, center);
      width: 330upx;
      height: 100upx;
      border-radius: 50upx;
      border-width: 2upx;
      border-style: solid;
      font-size: 36upx;
      line-height: 36upx;
      letter-spacing: 18upx;
      text-indent: 18upx;
    }
  }
}
</style>